<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> role 模块 </title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <script src="/pages/base.js"></script>
</head>

<body>
<div id="frameContent" class="content-wrapper" style="margin-left:0px; height: 500px">
<section class="content-header">
    <h1>
        角色管理
        <small>角色列表</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="/pages/home/home.html"><i class="fa fa-dashboard"></i> 首页</a></li>
    </ol>
</section>
<!-- 内容头部 /-->

<!-- 正文区域 -->
<section class="content">
    <!-- .box-body -->
    <div class="box box-primary" id="app">
        <div class="box-header with-border">
            <h3 class="box-title">列表</h3>
        </div>

        <div class="box-body">
            <!-- 数据表格 -->
            <div class="table-box">

                <!--工具栏-->
                <div class="pull-left">
                    <div class="form-group form-inline">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default" title="新建" onclick='location.href="/pages/role/role-add.html"'><i class="fa fa-file-o"></i> 新建</button>
                        </div>
                    </div>
                </div>
                <div class="box-tools pull-right">
                    <div class="has-feedback">
                        <input type="text" class="form-control input-sm" placeholder="搜索">
                        <span class="glyphicon glyphicon-search form-control-feedback"></span>
                    </div>
                </div>
                <!--工具栏/-->
                <!--数据列表-->
                <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                    <tr>
                        <th class="sorting">角色编号</th>
                        <th class="sorting">角色名称</th>
                        <th class="sorting">描述</th>
                        <th class="text-center">操作</th>
                    </tr>
                    <tr v-for="(role,index) in roles" :key="index">
                        <td >{{role.rid}}</td>
                        <td >{{role.rname}}</td>
                        <td >{{role.rdesc}}</td>
                        <td class="text-center">
                            <a href="#" @click.prevent="updateRole(role.rid)">角色授权操作</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- /.box-body -->
        <!-- .box-footer-->
        <div class="box-footer">
            <div class="pull-left">
                <div class="form-group form-inline">
                </div>
            </div>
        </div>
    </div>
</section>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            roles:[],
        },
        methods:{
            updateRole(rid){
              localStorage.setItem("rid",rid);
              location.href = '/pages/role/role-update.html';
            },
            findRole(){
                axios.get("http://localhost:8080/roles")
                    .then(resp=>{
                        console.log(resp.data);
                        this.roles = resp.data.data;
                })
            }
        },
        created(){
            console.log("created 操作 ");
            this.findRole();
        }
    });
</script>
</body>
</html>